// 导入React和useEffect钩子
import React, { useEffect, useState } from 'react'
// 导入Three.js库
import * as THREE from 'three'
// 导入GLTFLoader,用于加载GLTF模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 导入OrbitControls组件,用于控制场景的旋转、缩放和平移
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import './index.scss';
interface Props {

}

const Index = (props: Props) => {
  let switchCamera = 2.6// 相机的高度
  // 设置材质等属性
  const material = new THREE.MeshStandardMaterial({
    color: 0x808080, // 墙的颜色
    transparent: true, // 透明度
    opacity: 0, // 设置透明度
  });
  // 设置键盘按键状态
  let keysPressed: any = {
    w: false,
    a: false,                                                                                                                                                                                                                                                              
    s: false,
    d: false,
    space: false,
  };
  // 模型的信息
  const partsInfo = {
    part1: {
      
      name: "甘雨",
      desc: `甘雨甘雨是一位冰元素法师，拥有强大的冰系能力，`,
      img: "../../../public/3Dimg/8.jpg",
    },
    part2: {
      name: "机甲",
      desc: `二次元幻想画作`,
      img: "../../../public/3Dimg/9.jpg",
    },
    part3: {
      name: "红色机甲",
      desc: `二次元幻想画作`,
      img: "../../../public/3Dimg/7.jpg",
    },
    part4: {
      name: "萨勒芬妮",
      desc: `萨勒芬妮新发型`,
     img: "../../../public/3Dimg/6.jpg",
    },
    part5: {
      name: "萨勒芬妮",
      desc: `瓦罗兰大陆现今知名大明星之一，`,
      img: "../../../public/3Dimg/5.jpg",
    },
    part6: {
      name: "金克斯",
      desc: `金克斯是英雄联盟宇宙中的一个角色，是一名来自皮城的枪手。她是一位天才枪手，拥有惊人的射击技巧和惊人的火力输出能力`,
     img: "../../../public/3Dimg/4.jpg",
    },
    part7: {
      name: "委屈的狗子",
      desc: `就想你上厕所时，狗子觉得你不分享给他的委屈`,
      img: "../../../public/3Dimg/3.jpg",
    },
    part8: {
      name: "萨勒芬妮",
      desc: `瓦罗兰大陆现今知名大明星之一，曾是瓦罗兰大陆最顶尖的偶像歌手。现为瓦罗兰大陆偶像歌手协会名誉顾问。
`,
     img: "../../../public/3Dimg/2.jpg",
    },
    part9: {
     name: "草神",
      desc: `论捕捉小草神的108种方式`,
      img: "../../../public/3Dimg/11.jpg",
    },
    part10: {
      name: "大修狗",
      desc: `论捕捉大修狗的108种方式`,
      img: "../../../public/3Dimg/1.gif",
    },
  };
  const [detailPanel, setDetailPanel] = useState(false);
  const [info, setInfo] = useState<{ name: string; desc: string; img: string } | null>(null);
  // 关闭详情面板
  const closeDetails = () => {
    setDetailPanel(false);
  }
  useEffect(() => {
    const scene = new THREE.Scene();// 创建场景
    // 模型 创建GLTF加载器
    const loader1 = new GLTFLoader();
    loader1.load(
      '../../../public/3Dzlg/scene_collision.glb',
      (gltf) => {
        scene.add(gltf.scene)
        scene.position.set(0, 0, 0)
      }
    )
    let rolemixer: any; // 用于存储角色动画
    let roleactions: any = {}; // 用于存储角色所有动画动作
    const loader2 = new GLTFLoader();
    let people1: THREE.Group<THREE.Object3DEventMap>;//loader2加载的模型
    loader2.load(
      '../../../public/3Dzlg/scene_desk_obj.glb',
      (gltf) => {
        people1 = gltf.scene;
        scene.add(people1)
        people1.position.set(0, 0, 0)
        rolemixer = new THREE.AnimationMixer(people1);
        gltf.animations.forEach((clip, index) => {
          roleactions[index] = rolemixer.clipAction(clip);
        });
        setTimeout(() => {
          roleactions[12].play();
        }, 1)//默认播放动作
        people1.scale.set(2.5, 2.5, 2.5)
      }
    )

    let isColliding = false;// 添加一个全局变量来跟踪是否发生碰撞

    // 创建摄像机  透视摄像机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 创建光源 白色光,强度为 10
    const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
    directionalLight.position.set(10, 30, 10);
    scene.add(directionalLight);// 将光源添加到场景中
    // 添加环境光
    const ambientLight = new THREE.AmbientLight(0x404040, 30); // 强度设置为10
    ambientLight.position.set(0, 0, 0);
    scene.add(ambientLight);

    // 加载本地图片作为纹理
    const textureLoader = new THREE.TextureLoader();
    // 加载不同的纹理
    const texture10 = textureLoader.load('../../../public/3Dimg/1.gif');
    const geometry10 = new THREE.BoxGeometry(5.7, 6, 0.05);
    const material10 = new THREE.MeshStandardMaterial({ map: texture10 });
    const part10 = new THREE.Mesh(geometry10, material10);
    part10.userData.info = partsInfo.part10;
    part10.position.set(-13.2, 11.6, -33.6);
    scene.add(part10);
    // 加载不同的纹理
    const texture9 = textureLoader.load('../../../public/3Dimg/11.jpg');
    const geometry9 = new THREE.BoxGeometry(5.7, 6, 0.05);
    const material9 = new THREE.MeshStandardMaterial({ map: texture9 });
    const part9 = new THREE.Mesh(geometry9, material9);
    part9.userData.info = partsInfo.part9;
    part9.position.set(-3.2, 11.6, -33.6);
    scene.add(part9);
    // 加载不同的纹理
    const texture8 = textureLoader.load('../../../public/3Dimg/2.jpg');
    const geometry8 = new THREE.BoxGeometry(5.6, 6, 0.05);
    const material8 = new THREE.MeshStandardMaterial({ map: texture8 });
    const part8 = new THREE.Mesh(geometry8, material8);
    part8.userData.info = partsInfo.part8;
    part8.position.set(7.1, 11.6, -33.6);
    scene.add(part8);
    // 加载不同的纹理
    const texture7 = textureLoader.load('../../../public/3Dimg/3.jpg');
    const geometry7 = new THREE.BoxGeometry(0.05, 5.1, 5.2);
    const material7 = new THREE.MeshStandardMaterial({ map: texture7 });
    const part7 = new THREE.Mesh(geometry7, material7);
    part7.userData.info = partsInfo.part7;
    part7.position.set(5.7, 6.1, 13.6);
    scene.add(part7);
    // 加载不同的纹理
    const texture6 = textureLoader.load('../../../public/3Dimg/4.jpg');
    const geometry6 = new THREE.BoxGeometry(0.05, 8.2, 8.2);
    const material6 = new THREE.MeshStandardMaterial({ map: texture6 });
    const part6 = new THREE.Mesh(geometry6, material6);
    part6.userData.info = partsInfo.part6;
    part6.position.set(28.5, 8.45, 21.8);
    scene.add(part6);
    // 加载不同的纹理
    const texture5 = textureLoader.load('../../../public/3Dimg/5.jpg');
    const geometry5 = new THREE.BoxGeometry(0.05, 8.2, 8.2);
    const material5 = new THREE.MeshStandardMaterial({ map: texture5 });
    const part5 = new THREE.Mesh(geometry5, material5);
    part5.userData.info = partsInfo.part5;
    part5.position.set(28.5, 8.45, 34.6);
    scene.add(part5);
    // 加载不同的纹理
    const texture4 = textureLoader.load('../../../public/3Dimg/6.jpg');
    const geometry4 = new THREE.BoxGeometry(0.05, 8.2, 8.2);
    const material4 = new THREE.MeshStandardMaterial({ map: texture4 });
    const part4 = new THREE.Mesh(geometry4, material4);
    part4.userData.info = partsInfo.part4;
    part4.position.set(28.5, 8.45, -16.6);
    scene.add(part4);
    // 加载不同的纹理
    const texture3 = textureLoader.load('../../../public/3Dimg/7.jpg');
    const geometry3 = new THREE.BoxGeometry(0.05, 8.3, 8);
    const material3 = new THREE.MeshStandardMaterial({ map: texture3 });
    const part3 = new THREE.Mesh(geometry3, material3);
    part3.userData.info = partsInfo.part3;
    part3.position.set(28.5, 8.45, -3.9);
    scene.add(part3);
    // 加载不同的纹理
    const texture1 = textureLoader.load('../../../public/3Dimg/8.jpg');
    const geometry1 = new THREE.BoxGeometry(5, 5, 0.05);
    const material1 = new THREE.MeshStandardMaterial({ map: texture1 });
    const part1 = new THREE.Mesh(geometry1, material1);
    part1.userData.info = partsInfo.part1;
    part1.position.set(-0.3, 6.1, 5.7);
    scene.add(part1);
    // 加载不同的纹理
    const texture2 = textureLoader.load('../../../public/3Dimg/9.jpg');
    const geometry2 = new THREE.BoxGeometry(0.05, 8.3, 8);
    const material2 = new THREE.MeshStandardMaterial({ map: texture2 });
    const part2 = new THREE.Mesh(geometry2, material2);
    part2.userData.info = partsInfo.part2;
    part2.position.set(28.5, 8.45, 8.9);
    scene.add(part2);

    // 监听鼠标点击事件
    document.addEventListener('mousedown', onMouseDown2, false);

    // 点击展览品
    function onMouseDown2(event: any) {
      const mouse = new THREE.Vector2();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      const raycaster = new THREE.Raycaster();
      raycaster.setFromCamera(mouse, camera);
      const intersects = raycaster.intersectObjects(scene.children);
      if (intersects.length > 0) {
        const intersectedObject = intersects[0].object;
        showDetails(intersectedObject);
      }
    }
    // 显示模型的详细信息
    function showDetails(object: any) {
      const info = object.userData.info;
      if (info) {
        setDetailPanel(true)
        setInfo(info)
      }
    }
    // 监听键盘按下事件
    document.addEventListener('keydown', (event) => {
      if (isColliding) {
        return
      } else {
        if (event.key === 'w') {
          keysPressed.w = true;
          roleactions[14].play();
        } else if (event.key === 's') {
          keysPressed.s = true;
          roleactions[7].play();
        } else if (event.key === 'a') {
          keysPressed.a = true;
          roleactions[1].play();
        } else if (event.key === 'd') {
          keysPressed.d = true;
          roleactions[5].play();
        } else if (event.key === ' ') {
          keysPressed.space = true;
        }
      }
    });
    // 监听键盘松开事件
    document.addEventListener('keyup', (event) => {
      if (event.key === 'w') {
        keysPressed.w = false;
        roleactions[14].stop();
      } else if (event.key === 's') {
        keysPressed.s = false;
        roleactions[7].stop();
      } else if (event.key === 'a') {
        keysPressed.a = false;
        roleactions[1].stop();
      } else if (event.key === 'd') {
        keysPressed.d = false;
        roleactions[5].stop();
      } else if (event.key === ' ') {
        keysPressed.space = false;
      }
      if (!keysPressed.w && !keysPressed.s && !keysPressed.a && !keysPressed.d && !keysPressed.space) {
        roleactions[12].play();
      } else if (keysPressed.w || keysPressed.s || keysPressed.a || keysPressed.d || keysPressed.space) {
        roleactions[12].stop();
      }
    });

    let isDragging = false; // 是否正在拖动
    function onMouseDown(event: any) {
      isDragging = true;
    }
    function onMouseMove(event: any) {
      if (isDragging && people1) {
        const turnSpeed = 0.02;// 人物模型的旋转速度
        const mouseX = event.movementX;// 获取鼠标的X轴移动量
        people1.rotation.y -= mouseX * turnSpeed;// 根据鼠标移动更新人物模型的Y轴旋转
      }
    }
    function onMouseUp() {
      isDragging = false;
    }

    // 添加鼠标移动事件监听器
    document.addEventListener('mousedown', onMouseDown, false);
    document.addEventListener('mousemove', onMouseMove, false);
    document.addEventListener('mouseup', onMouseUp, false);

    // 创建一个WebGL渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff, 0);
    document.body.appendChild(renderer.domElement);

    // 创建一个透视相机,并设置其位置
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableRotate = false; // 禁用旋转

    let isJumping = false; // 跳跃状态
    let jumpSpeed = 0.2; // 跳跃速度
    let gravity = 0.6; // 重力
    let verticalVelocity = 0; // 垂直速度
    let jumpStartTime = 0; // 记录跳跃开始的时间
    let jumpDuration = 2.29; // 跳跃动画持续时间,单位秒
    // 跳跃
    const jump = () => {
      // 跳跃逻辑
      if (keysPressed.space && !isJumping) {
        if (people1.position.x > -17.6 && people1.position.x < 12 && people1.position.z > -38.8 && people1.position.z < -26.3) {

        } else {
          isJumping = true; // 开始跳跃
          verticalVelocity = jumpSpeed; // 设置垂直速度
          jumpStartTime = performance.now(); // 记录跳跃开始的时间戳
          if (roleactions[10]) {
            roleactions[10].play(); // 播放跳跃动画
          }
        }
      }
      // 如果正在跳跃,更新垂直位置
      if (isJumping) {
        const elapsedTime = (performance.now() - jumpStartTime) / 1000; // 转换为秒
        const jumpProgress = elapsedTime / jumpDuration;
        if (jumpProgress < 1) {
          // 根据动画进度更新垂直位置
          verticalVelocity = jumpSpeed * jumpProgress - 0.5 * gravity * jumpProgress * jumpProgress;
          // 更新y轴位置
          people1.position.y += verticalVelocity;
          // 应用重力
          verticalVelocity -= gravity;
        } else {
          // 动画完成,重置跳跃状态
          people1.position.y = 0; // 确保人物在地面上
          isJumping = false; // 跳跃结束
          verticalVelocity = 0; // 重置垂直速度
          roleactions[10].stop(); // 停止跳跃动画
        }
        // 检查是否落在沙发上
        if (character.position.x >= 8.89 && character.position.x <= 23.1 && character.position.z >= 35 && character.position.z <= 41.4) {
          isJumping = false; // 跳跃结束
          verticalVelocity = 0; // 重置垂直速度
          roleactions[10].stop(); // 停止跳跃动画
        }
      }
    }
    const moveSpeedfbd = 0.1;// 前后移动速度
    const moveSpeedlrd = 0.05;// 左右移动速度
    // 更新人物模型的位置
    const moveForward = (delta: number) => {
      if (people1) {
        const direction = new THREE.Vector3();// 创建一个向量来表示模型的前方
        direction.set(
          Math.sin(people1.rotation.y),
          0,
          Math.cos(people1.rotation.y)
        ).normalize(); // 归一化?
        const distance = 0.05; // 相机与人物模型的距离
        const cameraOffset = new THREE.Vector3(
          -Math.sin(people1.rotation.y) * distance,// 使用正弦计算X坐标
          switchCamera,// 相机的高度
          -Math.cos(people1.rotation.y) * distance// 使用余弦计算Z坐标
        );
        camera.position.set(people1.position.x + cameraOffset.x, people1.position.y + 2.5, people1.position.z + cameraOffset.z).add(cameraOffset);// 设置相机的位置
        camera.lookAt(new THREE.Vector3(
          people1.position.x + direction.x,
          people1.position.y + 5,
          people1.position.z + direction.z
        ));// 相机始终看向人物模型的位置
        // 移动
        const move = () => {
          if (keysPressed.w) {
            people1.position.addScaledVector(direction, moveSpeedfbd);
          }
          if (keysPressed.s) {
            people1.position.addScaledVector(direction, -moveSpeedfbd);
          }
          if (keysPressed.a) {
            const rightDirection = new THREE.Vector3(Math.cos(people1.rotation.y), 0, -Math.sin(people1.rotation.y));
            people1.position.addScaledVector(rightDirection, moveSpeedlrd);
          }
          if (keysPressed.d) {
            const leftDirection = new THREE.Vector3(-Math.cos(people1.rotation.y), 0, Math.sin(people1.rotation.y));
            people1.position.addScaledVector(leftDirection, moveSpeedlrd);
          }
        }
        if (people1.position.x > -11.27 && people1.position.x < -0.77 && people1.position.z < -13.4) {
          // 上楼梯
          if (people1.position.z > -14) {
            people1.position.y = 0;
          } else if (people1.position.z > -17) {
            people1.position.y = 1.4;
          } else if (people1.position.z > -20) {
            people1.position.y = 2.9;
          } else if (people1.position.z > -23) {
            people1.position.y = 4.7;
          } else if (people1.position.z > -26) {
            people1.position.y = 5.8;
          }
        }
        move();
        character.position.set(camera.position.x, camera.position.y, camera.position.z);
      }
    }
    // 创建沙发的几何体
    const sofaGeometry = new THREE.BoxGeometry(13, 5, 5);
    const sofaMaterial = material
    const sofaMesh = new THREE.Mesh(sofaGeometry, sofaMaterial);
    sofaMesh.position.set(16, 0, 38);
    scene.add(sofaMesh);
    // 创建桌子的几何体
    const deskGeometry = new THREE.BoxGeometry(5, 9, 10);
    const deskMaterial = material
    const deskMesh = new THREE.Mesh(deskGeometry, deskMaterial);
    deskMesh.position.set(-15, 0, 37);
    scene.add(deskMesh);
    // 创建凳子的几何体
    const stoolGeometry = new THREE.BoxGeometry(5, 4, 3);
    const stoolMaterial = material
    const stoolMesh = new THREE.Mesh(stoolGeometry, stoolMaterial);
    stoolMesh.position.set(-12, 0, 36);
    scene.add(stoolMesh);

    const stepWidth = 6; // 台阶宽度
    const stepHeight = 0.35; // 台阶高度
    const stepDepth = 6; // 台阶长度
    for (let i = 0; i < 9; i++) {
      const stepGeometry = new THREE.BoxGeometry(stepWidth, stepHeight, stepDepth);
      const stepMaterial = material
      const step = new THREE.Mesh(stepGeometry, stepMaterial);
      step.position.x = -6;
      step.position.y = i * (stepHeight + 0.39); // 0.1是台阶之间的间隙
      step.position.z = -14 + (-i - 1); // 使第一个台阶从原点开始
      step.rotation.y = -Math.PI / 2;// 使台阶旋转90度
      scene.add(step);
    }
    // 碰撞检测
    function checkCollision() {
      // 更新模型的包围盒
      wall1.updateMatrixWorld();
      wall2.updateMatrixWorld();
      wall3.updateMatrixWorld();
      wall4.updateMatrixWorld();
      wall5.updateMatrixWorld();
      wall6.updateMatrixWorld();
      wall7.updateMatrixWorld();
      wall8.updateMatrixWorld();
      railing1.updateMatrixWorld();
      railing11.updateMatrixWorld();
      railing2.updateMatrixWorld();
      railing21.updateMatrixWorld();
      railing3.updateMatrixWorld();
      railing31.updateMatrixWorld();
      railing4.updateMatrixWorld();
      railing5.updateMatrixWorld();
      railing6.updateMatrixWorld();
      railing7.updateMatrixWorld();
      sofaMesh.updateMatrixWorld();
      deskMesh.updateMatrixWorld();
      stoolMesh.updateMatrixWorld();
      character.updateMatrixWorld();
      const wallBox1 = new THREE.Box3().setFromObject(wall1);
      const wallBox2 = new THREE.Box3().setFromObject(wall2);
      const wallBox3 = new THREE.Box3().setFromObject(wall3);
      const wallBox4 = new THREE.Box3().setFromObject(wall4);
      const wallBox5 = new THREE.Box3().setFromObject(wall5);
      const wallBox6 = new THREE.Box3().setFromObject(wall6);
      const wallBox7 = new THREE.Box3().setFromObject(wall7);
      const wallBox8 = new THREE.Box3().setFromObject(wall8);
      const railing1Box = new THREE.Box3().setFromObject(railing1);
      const railing11Box = new THREE.Box3().setFromObject(railing11);
      const railing2Box = new THREE.Box3().setFromObject(railing2);
      const railing21Box = new THREE.Box3().setFromObject(railing21);
      const railing3Box = new THREE.Box3().setFromObject(railing3);
      const railing31Box = new THREE.Box3().setFromObject(railing31);
      const railing4Box = new THREE.Box3().setFromObject(railing4);
      const railing5Box = new THREE.Box3().setFromObject(railing5);
      const railing6Box = new THREE.Box3().setFromObject(railing6);
      const railing7Box = new THREE.Box3().setFromObject(railing7);
      const desk = new THREE.Box3().setFromObject(deskMesh);
      const sofa = new THREE.Box3().setFromObject(sofaMesh);
      const stool = new THREE.Box3().setFromObject(stoolMesh);
      const characterBox = new THREE.Box3().setFromObject(character);
      if (railing7Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x - 0.5, 0, people1.position.z);
        character.position.set(character.position.x - 0.5, 0, character.position.z);
      }
      if (railing6Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x - 0.5, 0, people1.position.z);
        character.position.set(character.position.x - 0.5, 0, character.position.z);
      }
      if (railing5Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x + 0.5, 0, people1.position.z);
        character.position.set(character.position.x + 0.5, 0, character.position.z);
      }
      if (railing4Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x + 0.5, 0, people1.position.z);
        character.position.set(character.position.x + 0.5, 0, character.position.z);
      }
      if (railing3Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x + 0.5, people1.position.y, people1.position.z);
        character.position.set(character.position.x + 0.5, character.position.x, character.position.z);
      }
      if (railing31Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x - 0.5, people1.position.y, people1.position.z);
        character.position.set(character.position.x - 0.5, character.position.x, character.position.z);
      }
      if (railing2Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x, people1.position.y, people1.position.z + 0.5);
        character.position.set(character.position.x, character.position.x, character.position.z + 0.5);
      }
      if (railing21Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x, people1.position.y, people1.position.z - 0.5);
        character.position.set(character.position.x, character.position.x, character.position.z - 0.5);
      }
      if (railing1Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x, people1.position.y, people1.position.z + 0.5);
        character.position.set(character.position.x, character.position.x, character.position.z + 0.5);
      }
      if (railing11Box.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x, people1.position.y, people1.position.z - 0.5);
        character.position.set(character.position.x, character.position.x, character.position.z - 0.5);
      }
      if (wallBox1.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x, people1.position.y, people1.position.z + 0.5);
        character.position.set(character.position.x, character.position.x, character.position.z + 0.5);
      }
      if (wallBox2.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x, people1.position.y, people1.position.z - 0.5);
        character.position.set(character.position.x, character.position.x, character.position.z - 0.5);
      }
      if (wallBox3.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x, people1.position.y, people1.position.z - 0.5);
        character.position.set(character.position.x, character.position.x, character.position.z - 0.5);
      }
      if (wallBox4.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x, people1.position.y, people1.position.z + 0.5);
        character.position.set(character.position.x, character.position.x, character.position.z + 0.5);
      }
      if (wallBox5.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x - 0.5, people1.position.y, people1.position.z);
        character.position.set(character.position.x - 0.5, character.position.x, character.position.z);
      }
      if (wallBox6.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x + 0.5, people1.position.y, people1.position.z);
        character.position.set(character.position.x + 0.5, character.position.x, character.position.z);
      }
      if (wallBox7.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x - 0.5, people1.position.y, people1.position.z);
        character.position.set(character.position.x - 0.5, character.position.x, character.position.z);
      }
      if (wallBox8.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        people1.position.set(people1.position.x + 0.5, people1.position.y, people1.position.z);
        character.position.set(character.position.x + 0.5, character.position.x, character.position.z);
      }
      if (desk.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        console.log(people1.position.x);

        if (people1.position.z > 41.6) {
          people1.position.set(people1.position.x, people1.position.y, people1.position.z + 0.5);
          character.position.set(character.position.x, character.position.x, character.position.z + 0.5);
        } else if (people1.position.z < 36.4) {
          people1.position.set(people1.position.x, people1.position.y, people1.position.z - 0.5);
          character.position.set(character.position.x, character.position.x, character.position.z - 0.5);
        } else if (people1.position.x < -11.7) {
          people1.position.set(people1.position.x + 0.5, people1.position.y, people1.position.z);
          character.position.set(character.position.x + 0.5, character.position.x, character.position.z);
        }
      }
      if (sofa.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        if (people1.position.z > 35) {
          people1.position.set(people1.position.x, people1.position.y, people1.position.z - 0.5);
          character.position.set(character.position.x, character.position.x, character.position.z - 0.5);
        }
      }
      if (stool.intersectsBox(characterBox)) {
        // 检测到碰撞,阻止人物模型移动
        isColliding = true;
        if (people1.position.z < 34.5) {
          people1.position.set(people1.position.x, people1.position.y, people1.position.z - 0.5);
          character.position.set(character.position.x, character.position.x, character.position.z - 0.5);
        } else if (people1.position.z > 37.4) {
          people1.position.set(people1.position.x, people1.position.y, people1.position.z + 0.5);
          character.position.set(character.position.x, character.position.x, character.position.z + 0.5);
        } else if (people1.position.x < -8.8) {
          people1.position.set(people1.position.x + 0.5, people1.position.y, people1.position.z);
          character.position.set(character.position.x + 0.5, character.position.x, character.position.z);
        }
      }
      isColliding = false;
    }
    const clock = new THREE.Clock();

    // 创建楼梯栏杆7几何体和材质
    const railingGeometry7 = new THREE.BoxGeometry(0.5, 12, 4);
    const railingMaterial7 = material
    const railing7 = new THREE.Mesh(railingGeometry7, railingMaterial7);
    railing7.position.x = -10.3;
    railing7.position.y = 2.6;
    railing7.position.z = -24.5;
    scene.add(railing7);
    // 创建楼梯栏杆6几何体和材质
    const railingGeometry6 = new THREE.BoxGeometry(0.6, 5, 7);
    const railingMaterial6 = material
    const railing6 = new THREE.Mesh(railingGeometry6, railingMaterial6);
    railing6.position.x = -10.3;
    railing6.position.y = 2.6;
    railing6.position.z = -20;
    scene.add(railing6);
    // 创建楼梯栏杆5几何体和材质
    const railingGeometry5 = new THREE.BoxGeometry(0.5, 6, 7);
    const railingMaterial5 = material
    const railing5 = new THREE.Mesh(railingGeometry5, railingMaterial5);
    railing5.position.x = -1.8;
    railing5.position.y = 2.6;
    railing5.position.z = -19;
    scene.add(railing5);
    // 创建楼梯栏杆4几何体和材质
    const railingGeometry4 = new THREE.BoxGeometry(0.5, 12, 4);
    const railingMaterial4 = material
    const railing4 = new THREE.Mesh(railingGeometry4, railingMaterial4);
    railing4.position.x = -1.8;
    railing4.position.y = 2.6;
    railing4.position.z = -24.5;
    scene.add(railing4);
    // 创建楼梯栏杆3几何体和材质
    const railingGeometry3 = new THREE.BoxGeometry(0.5, 3, 7);
    const railingMaterial3 = material
    const railing3 = new THREE.Mesh(railingGeometry3, railingMaterial3);
    railing3.position.x = 12.6;
    railing3.position.y = 7;
    railing3.position.z = -30.6;
    scene.add(railing3);
    // 创建楼梯栏杆3-1几何体和材质
    const railingGeometry31 = new THREE.BoxGeometry(0.5, 3, 7);
    const railingMaterial31 = material
    const railing31 = new THREE.Mesh(railingGeometry31, railingMaterial31);
    railing31.position.x = 12;
    railing31.position.y = 7;
    railing31.position.z = -30.6;
    scene.add(railing31);
    // 创建楼梯栏杆2几何体和材质
    const railingGeometry2 = new THREE.BoxGeometry(8, 3, 0.5);
    const railingMaterial2 = material
    const railing2 = new THREE.Mesh(railingGeometry2, railingMaterial2);
    railing2.position.x = -14;
    railing2.position.y = 7;
    railing2.position.z = -26.5;
    scene.add(railing2);
    // 创建楼梯栏杆2-1几何体和材质
    const railingGeometry21 = new THREE.BoxGeometry(8, 3, 0.5);
    const railingMaterial21 = material
    const railing21 = new THREE.Mesh(railingGeometry21, railingMaterial21);
    railing21.position.x = -14;
    railing21.position.y = 7;
    railing21.position.z = -27.5;
    scene.add(railing21);
    // 创建楼梯栏杆1几何体和材质
    const railingGeometry1 = new THREE.BoxGeometry(14, 3, 0.5);
    const railingMaterial1 = material
    const railing1 = new THREE.Mesh(railingGeometry1, railingMaterial1);
    railing1.position.x = 5;
    railing1.position.y = 7;
    railing1.position.z = -26.5;
    scene.add(railing1);
    // 创建楼梯栏杆1-1几何体和材质
    const railingGeometry11 = new THREE.BoxGeometry(14, 3, 0.5);
    const railingMaterial11 = material
    const railing11 = new THREE.Mesh(railingGeometry11, railingMaterial11);
    railing11.position.x = 5;
    railing11.position.y = 7;
    railing11.position.z = -27.5;
    scene.add(railing11);
    // 创建墙体1几何体和材质
    const wallGeometry1 = new THREE.BoxGeometry(53, 20, 0.5);
    const wallMaterial1 = material
    const wall1 = new THREE.Mesh(wallGeometry1, wallMaterial1);
    wall1.position.x = 5;
    wall1.position.y = 10;
    wall1.position.z = -35;
    scene.add(wall1);
    // 创建墙体2几何体和材质
    const wallGeometry2 = new THREE.BoxGeometry(53, 20, 0.5);
    const wallMaterial2 = material
    const wall2 = new THREE.Mesh(wallGeometry2, wallMaterial2);
    wall2.position.x = 5;
    wall2.position.y = 10;
    wall2.position.z = 51.66;
    scene.add(wall2);
    // 创建墙体3几何体和材质
    const wallGeometry3 = new THREE.BoxGeometry(24, 22, 0.5);
    const wallMaterial3 = material
    const wall3 = new THREE.Mesh(wallGeometry3, wallMaterial3);
    wall3.position.x = -6.9;
    wall3.position.y = 0;
    wall3.position.z = 6.439;
    scene.add(wall3);
    // 创建墙体4几何体和材质
    const wallGeometry4 = new THREE.BoxGeometry(24, 22, 0.5);
    const wallMaterial4 = material
    const wall4 = new THREE.Mesh(wallGeometry4, wallMaterial4);
    wall4.position.x = -6.9;
    wall4.position.y = 0;
    wall4.position.z = 8.151;
    scene.add(wall4);
    // 创建墙体5几何体和材质
    const wallGeometry5 = new THREE.BoxGeometry(0.5, 30, 90);
    const wallMaterial5 = material
    const wall5 = new THREE.Mesh(wallGeometry5, wallMaterial5);
    wall5.position.x = 29.4;
    wall5.position.y = 0;
    wall5.position.z = 8.151;
    scene.add(wall5);
    // 创建墙体6几何体和材质
    const wallGeometry6 = new THREE.BoxGeometry(0.5, 30, 90);
    const wallMaterial6 = material
    const wall6 = new THREE.Mesh(wallGeometry6, wallMaterial6);
    wall6.position.x = -18.8;
    wall6.position.y = 0;
    wall6.position.z = 8.151;
    scene.add(wall6);
    // 创建墙体7几何体和材质
    const wallGeometry7 = new THREE.BoxGeometry(0.5, 23, 13.8);
    const wallMaterial7 = material
    const wall7 = new THREE.Mesh(wallGeometry7, wallMaterial7);
    wall7.position.x = 3.6;
    wall7.position.y = 0;
    wall7.position.z = 13.1;
    scene.add(wall7);
    // 创建墙体8几何体和材质
    const wallGeometry8 = new THREE.BoxGeometry(0.5, 23, 13.8);
    const wallMaterial8 = material
    const wall8 = new THREE.Mesh(wallGeometry8, wallMaterial8);
    wall8.position.x = 4.8;
    wall8.position.y = 0;
    wall8.position.z = 13.1;
    scene.add(wall8);
    // 创建墙体9几何体和材质
    const wallGeometry9 = new THREE.BoxGeometry(31.2, 0.2, 8);
    const wallMaterial9 = material
    const wall9 = new THREE.Mesh(wallGeometry9, wallMaterial9);
    wall9.position.x = -2.6;
    wall9.position.y = 5.8;
    wall9.position.z = -30.4;
    scene.add(wall9);
    // 创建人物模型的几何体和材质
    const characterGeometry = new THREE.BoxGeometry(1.8, 9, 1);
    const characterMaterial = material
    const character = new THREE.Mesh(characterGeometry, characterMaterial);
    character.position.set(0, 0, 0);
    scene.add(character);

    // 动画循环
    const animate = () => {
      requestAnimationFrame(animate);// 请求下一帧动画
      const delta = clock.getDelta();
      moveForward(delta)// 更新人物模型的位置
      checkCollision(); // 检测碰撞
      if (rolemixer) {
        rolemixer.update(delta);// 更新动画混合器
      }
      jump()// 跳跃
      renderer.render(scene, camera);// 渲染场景
    };
    animate();// 开始动画
    // 清理函数
    return () => {
      controls.dispose();// 销毁OrbitControls
      document.body.removeChild(renderer.domElement);// 从DOM中移除渲染器的canvas元素
    };
  }, []);
  const Switch = () => {// 切换视角
    if (switchCamera == 2.6) {
      switchCamera = 4
    } else {
      switchCamera = 2.6
    }
  }
  document.addEventListener('contextmenu', Switch, false)// 鼠标右键事件监听器
  return (
    <div className='container'>
      {
        detailPanel && (
          <div className="details">
            <div className="info-content-left">
              <h2>{info?.name}</h2>
              <br />
              <p>{info?.desc}</p>
            </div>
            <div className="info-content-right">
              <img src={info?.img} alt="" />
            </div>
            <button className='close-btn' onClick={closeDetails}>关闭</button>
          </div>
        )
      }
    </div>
  )
}

export default Index